/*
 * @Author: dingyuwen ding_yuwen@163.com
 * @Date: 2023-02-13 14:56:49
 * @LastEditTime: 2023-03-20 21:07:29
 * @LastEditors: DingYuwen 43669762+DingYuwen@users.noreply.github.com
 * @Description:
 */
import {
  Divider,
  Flex,
  Heading,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalHeader,
  ModalOverlay,
  Text,
  useBreakpointValue,
  useDisclosure,
} from '@chakra-ui/react';
import { useState } from 'react';

import InvitationCardItem, {
  InvitationCardItemInfo,
} from './InvitationCardItem';

import { useAppSelector } from '@/store/hooks';

type DividerOrientation = 'horizontal' | 'vertical' | undefined;
export default function Commission() {
  const {
    isOpen: modalIsOpen,
    onOpen: modalOnOpen,
    onClose: modalOnClose,
  } = useDisclosure();

  const { recommendInfo } = useAppSelector((store) => store.profile);
  const { inviteeList } = recommendInfo;
  const [showDetailRecord, setShowDetailRecord] =
    useState<InvitationCardItemInfo | null>(null);

  const orientation = useBreakpointValue({
    base: 'horizontal',
    md: 'vertical',
  });
  return (
    <Flex justify="flex-start" w="full" gap="4" p="3" direction="column">
      <Heading>邀请记录</Heading>
      <Flex w="full" maxH="20rem" overflowY="scroll">
        <Flex
          justify="center"
          w="full"
          h="max-content"
          gap="4"
          direction="column"
        >
          {!inviteeList.length && (
            <Text w="full" textAlign="center">
              您还没有邀请用户，快去邀请吧！
            </Text>
          )}
          {inviteeList.map((info: any, index: number) => (
            <InvitationCardItem
              key={index}
              info={info}
              onOpenDetail={(_info) => {
                modalOnOpen();
                setShowDetailRecord(_info);
              }}
            />
          ))}
        </Flex>
      </Flex>
      <Modal
        isOpen={modalIsOpen}
        onClose={() => {
          modalOnClose();
        }}
        size={{ base: 'sm', md: 'lg' }}
        isCentered
      >
        <ModalOverlay />
        <ModalContent fontFamily="Inter">
          <ModalCloseButton className="modal-close-btn" />
          <ModalHeader fontWeight="bold" pb={3}>
            邀请记录详情
          </ModalHeader>
          <ModalBody>
            <Flex
              gap="4"
              pb="4"
              h={{ base: '22rem', md: '12rem' }}
              direction={{ base: 'column', md: 'row' }}
            >
              <Flex direction="column" gap="2" p="2">
                <Text fontSize="md" fontFamily="body">
                  账户名：{showDetailRecord?.username}
                </Text>
                <Text fontSize="md" fontFamily="body">
                  手机号：{showDetailRecord?.mobile}
                </Text>
                <Text fontSize="md" fontFamily="body">
                  注册时间：{showDetailRecord?.createTime}
                </Text>
              </Flex>
              <Divider orientation={orientation as DividerOrientation} />
              <Flex direction="column" gap="2" p="2">
                <Text fontSize="md" fontFamily="body">
                  佣金状态：
                  {!showDetailRecord?.customerExpenseRecord ||
                  showDetailRecord?.customerExpenseRecord?.isClosed === 0
                    ? '未充值'
                    : showDetailRecord?.customerExpenseRecord?.isClosed === 1
                    ? '确认中'
                    : '已到账'}
                </Text>
                <Text fontSize="md" fontFamily="body">
                  消费金额：¥{' '}
                  {showDetailRecord?.customerExpenseRecord?.expenses}
                </Text>
                <Text fontSize="md" fontFamily="body">
                  获得佣金：¥{' '}
                  {showDetailRecord?.customerExpenseRecord?.commission}
                </Text>
                <Text fontSize="md" fontFamily="body">
                  佣金比例：{showDetailRecord?.customerExpenseRecord?.ratio}%
                </Text>
                <Text fontSize="md" fontFamily="body">
                  消费时间：
                  {showDetailRecord?.customerExpenseRecord?.createTime}
                </Text>
              </Flex>
            </Flex>
          </ModalBody>
        </ModalContent>
      </Modal>
    </Flex>
  );
}
